<!--
+----------------------------------------------------------------------
| 友得云客  - 开启房产营销新纪元
+----------------------------------------------------------------------
| Copyright (c) 2019~2023 优得（西安）信息科技有限公司版权所有
+----------------------------------------------------------------------
| Licensed 友得云客不是自由软件 未经允许不可移除相关版权
+----------------------------------------------------------------------
| Author: www.youdeyunke.com
+----------------------------------------------------------------------
-->
<template>
    <div class="header" v-cloak>
        <div class="title">
            <!-- div class="hat" :style="{backgroundColor: themeColor}"></div -->
            <div class="icon" v-if="icon">
                <img :src="icon" />
            </div>
            <div class="text" :style="'font-size:' + fontsize + 'px;color:' + fontcolor">{{ title }}</div>
        </div>
        <div class="subtitle">
            {{ subtitle }}
            <div class="arrow" v-if="arrow">
                <i class="el-icon-arrow-right"></i>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data () {
        return {
            loading: false,
        };
    },
    props: {
        title: { type: String, default: "" },
        icon: { type: String, default: null },
        subtitle: { type: String, default: "" },
        link: { type: Object, default: null },
        themeColor: { type: String, default: '#1989fa' },
        fontsize: { type: Number, default: 40 },
        fontcolor: { type: String, default: '#000000' },
    },

    mounted: function () { },

    computed: {
        arrow: function () {
            return this.link && this.link.cat !== "no";
        },
    },

    methods: {},
};
</script>

<style scoped>
.header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    height: 60px;
}

.title {
    font-size: 40px;
    font-weight: bold;
    color: #000;
    display: flex;
    align-items: center;
    position: relative
}

.title .hat {
    width: 20px;
    height: 40px;
    opacity: 0.5;
    border-radius: 2px;
    margin-right: 4px;
}

.title .icon {
    width: 40px;
    height: 40px;
    margin-right: 8px;
}

.title .icon img {
    width: 100%;
    height: 100%;
}

.title .text {}

.subtitle {
    font-size: 24px;
    color: #999;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.subtitle .arrow {
    margin-left: 6px;
}
</style>